const path = require('path');
const webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VueLoaderPlugin } = require('vue-loader')


module.exports = {
	mode: 'development',
	entry: './src/main.js',
	devtool: 'source-map',
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'bundle'),
	},
	devServer: {
		static: './bundle',
		port: 8888,
		hot: true,
	},
	devtool: 'inline-source-map',
	resolve: {
		extensions: ['.vue', '.js', '...'],
		alias: {
			"vue$": "vue/dist/vue.esm-bundler.js",
			"@": path.resolve(__dirname, 'src/'),
			// "vue$": "vue/dist/vue.runtime.esm-bundler.js"
		}
	},
	module: {
		rules: [{
			test: /\.(css|less)/,
			exclude: path.resolve(__dirname, 'dist'),
			use: [{
					loader: MiniCssExtractPlugin.loader,
				},
				// {
				// 	loader: 'style-loader',
				// },
				{
					loader: 'css-loader',
				}, {
					loader: 'less-loader',
				}
			]
		}, {
			test: /\.jpg$/,
			exclude: path.resolve(__dirname, 'dist'),
			use: [{
				loader: 'file-loader',
				options: {
					name: '[name].jpg',
					outputPath: "img/",
					esModule: false
				}
			}],
			type: 'javascript/auto'
		}, {
			test: /\.(woff|woff2|eot|ttf|otf)$/,
			use: [{
				loader: 'file-loader',
				options: {
					name: '[name].[ext]',
					outputPath: "font/",
					esModule: false
				}
			}],
			type: 'javascript/auto'
		}, {
			test: /\.m?js$/,
			exclude: /(node_modules|bower_components)/,
			use: {
				loader: 'babel-loader',
				options: {
					presets: ['@babel/preset-env'],
				}
			}
		}, {
			test: /\.vue$/,
			use: 'vue-loader'
		}, ]
	},
	plugins: [new HtmlWebpackPlugin({
			favicon: 'public/favicon.ico',
			templateParameters: { BASE_URL: '' },
			title: "hello,webpack",
			template: 'public/index.html'
		}),
		new MiniCssExtractPlugin({
			filename: "css/[name].css",
		}),
		new VueLoaderPlugin()
	]
};
